html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

ul,
li {
    margin: 0;
    padding: 0;
}

img {
	padding: 0;
	margin: 0;
	border: none;
	display: block;
}

#simple,
#custom,
#scrollevent,
#contain,
#form,
#scrollfree,
#withpic,
#complex {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/** simple **/
#simple #wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 44px;
}

#simple #wrapper li, #scrollevent #wrapper li {
    line-height: 32px;
    background: #DDD;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #eee;
    padding-left: 1em;
    list-style-type: none;
}

#simple #btns {
    margin: 0;
    padding: 0;
    position: absolute;
    height: 44px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #DA020C;
    color: #FFF;
}

#simple .btn {
    float: left;
    width: 25%;
    text-align: center;
    line-height: 44px;
    border-left: 1px solid #F51C26;
    border-right: 1px solid #C7060E;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/** custom **/
#custom #header {
    height: 42px;
    line-height: 42px;
    text-align: center;
    color: #fff;
    background: #DA020C;
}

#custom #wrapper {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    bottom: 0;
}
#custom #scroller {
	padding: 12px 6px;
}
#custom #scroller p {
    padding: 0;
    margin: 0;
    line-height: 32px;
}

#custom #scroller h1 {
    border-top: 1px solid #DA020C;
    padding-top: 24px;
    text-align: center;
}

/** scrollevent **/
#scrollevent #wrapper,
#contain #wrapper {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#scrollevent #info {
	position: absolute;
	z-index: 2;
	top: 10px;
	left: 50px;
	font-size: 14px;
	color: #C7060E;
	background: rgba(0, 0, 0, 0.1);
	padding: 0 10px;
}

/** contain **/
#contain {
	line-height: 32px;
	text-indent: 2em;
}
#contain #scroller {
	padding: 10px;
}
#contain #inner {
	width: 196px;
	float: left;
	height: 222px;
	border: 1px solid #DA020C;
	color: #DA020C;
	margin: 12px;
	margin-left: 0;
}
#contain #inner>div {
	padding: 10px;
}

/** form **/
#form table {
	width: 100%;
	line-height: 42px;
}
#form table tr td:nth-child(1) {
	width: 100px;
	text-align: right;
}
#form table input {
	width: 90%;
	padding: 4px 0;
}
#form #wrapper, #scrollfree #wrapper, #withpic #wrapper {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    bottom: 42px;
}
#form #scroller {
	padding: 10px 0;
}
#form #header, #scrollfree #header, #withpic #header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 42px;
	background: #DA020C;
	color: #fff;
	line-height: 42px;
	text-align: center;
}
#form #footer, #scrollfree #footer, #withpic #footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 42px;
	background: #DA020C;
	color: #fff;
	line-height: 42px;
	text-align: center;
}

#withpic p {
	padding: 0;
	margin: 0;
	line-height: 32px;
	text-align: center;
}

/** complex **/
#complex #header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 48px;
	color: #DA020C;
	line-height: 42px;
	text-align: center;
}

#complex #switchL, #complex #switchR {
	width: 50%;
	float: left;
	height: 100%;
}

#complex #line {
	position: absolute;
	background: #DA020C;
	height: 4px;
	width: 50%;
	bottom: 0;
	left: 0;
}

#complex #wrapper {
	position: absolute;
	top: 48px;
	left: 0;
	width: 100%;
	bottom: 0;
	overflow: hidden;
}

#complex li {
    line-height: 32px;
    background: #DDD;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #eee;
    padding-left: 1em;
    list-style-type: none;
}

#complex #scrollerL {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
#complex #scrollerR {
	position: absolute;
	top: 0;
	left: 100%;
	width: 100%;
	min-height: 100%;
}

#complex p {
	padding: 0;
	margin: 0;
	line-height: 32px;
	text-align: center;
}

/** threetabs **/
#threetabs {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#threetabs #header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 48px;
	color: #DA020C;
	line-height: 42px;
	text-align: center;
}

#threetabs #switchL,#threetabs #switchC, #threetabs #switchR {
	width: 33.3%;
	float: left;
	height: 100%;
}

#threetabs #line {
	position: absolute;
	background: #DA020C;
	height: 4px;
	width: 33.3%;
	bottom: 0;
	left: 0;
}

#threetabs #wrapper {
	position: absolute;
	top: 48px;
	left: 0;
	width: 100%;
	bottom: 0;
	overflow: hidden;
}

#threetabs li {
    line-height: 32px;
    background: #DDD;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #eee;
    padding-left: 1em;
    list-style-type: none;
}

#threetabs #scrollerL {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
#threetabs #scrollerC {
	position: absolute;
	top: 0;
	left: 100%;
	width: 100%;
}
#threetabs #scrollerR {
	position: absolute;
	top: 0;
	left: 200%;
	width: 100%;
	min-height: 100%;
}

#threetabs p {
	padding: 0;
	margin: 0;
	line-height: 32px;
	text-align: center;
}
